

<template>
    <div>
        <div class="bg-curved"></div>
        <v-card outlined class="rounded-lg">
            <v-card-text>
                <v-row no-gutters dense>
                    <v-col class="d-flex align-center">
                        <v-avatar
                            size="24"
                            style="border: 2px solid white"
                            color="white"
                        >
                            <v-img :src="data.app_url"></v-img>
                        </v-avatar>
                        <h2 class="ml-1">{{data.app_name}}</h2>
                    </v-col>
                </v-row>
            </v-card-text>
        </v-card>
        <v-btn icon @click="handleClick" style="left: 50px">
            <v-icon>mdi-delete</v-icon>&nbsp;&nbsp;删除组件
        </v-btn>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
        },
        id: {
            type: Number,
        }
    },
    methods: {
        handleClick() {
            this.$emit('del');
        },
    },
};
</script>
